<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>商品详情 | 机械配件商城</title>
	<link rel="stylesheet" type="text/css" href="./element-ui/index.css">
	<link rel="stylesheet" type="text/css" href="./css/common.css" />
	<link rel="stylesheet" type="text/css" href="./components/min-width-container.css"/>
	<link rel="stylesheet" type="text/css" href="./components/footer-bottom.css"/>
	<link rel="stylesheet" type="text/css" href="./components/footer-image.css" />
	<link rel="stylesheet" type="text/css" href="./components/footer-link.css" />
	<link rel="stylesheet" type="text/css" href="./components/header-full.css" />
	<style>
		.item {
			margin-top: 10px;
			margin-right: 40px;
		}

		.content-commodity{
			display: flex;
		}

		.content-commodity-wapper{
			flex-grow: 1;
		}

		.content-commodity-wapper-flex{
			display: flex;
		}

		.content-commodity-left-image{
			width: 378px;
			height: 378px;
			border: 1px solid #E9E9E9;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.content-commodity-right{
			flex-grow: 1;
		}

		.content-commodity-left-subimages{
			display: flex;
			height: 58px;
		}

		.content-commodity-left-subimages-images{
			flex-grow: 1;
			position: relative;
		}

		.content-commodity-left-subimages-last, .content-commodity-left-subimages-next{
			width: 29px;
			background: #E1DFE0;
			line-height: 58px;
			text-align: center;
		}

		.content-commodity-left-subimages-images-container{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow-x: scroll;
			overflow-y: hidden;
			white-space: nowrap;
		}

		.content-commodity-left-subimages-images-container::-webkit-scrollbar{
			display:none;
		}

		.content-commodity-left-subimages-images-container > div{
			display: inline-block;
			width: 58px;
			height: 58px;
			border: 1px solid #E1DFE0;
			margin-left: 8px;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.content-commodity-left-subimages-images-container > div:last-child{
			margin-right: 8px;
		}

		.content-commodity-recommend{
			width: 172px;
			flex-shrink: 0;
		}

		.content-commodity-recommend-item .el-image{
			width: 103px;
			height: 103px;
		}

		.content-commodity-right{
			padding: 0 32px;
			border-right: 1px solid #EBEBEB;
		}

		.content-commodity-right-selected{
			width: 93px;
			height: 33px;
			line-height: 31px;
			display: inline-block;
			border: 1px solid #41B6E7;
			background-position: bottom right;
			background-repeat: no-repeat;
			background-image: url(images/selected.png);
		}

		.content-commodity-right-price{
			height: 77px;
			background: #EEEEEE;
			padding: 8px;
		}

		.content-commodity-right-num .el-input-number__decrease, .content-commodity-right-num .el-input-number__increase{
			height: 26px;
			line-height: 26px;
		}

		.content-commodity-right-buy > div{
			width: 140px;
			height: 40px;
			line-height: 40px;
			display: inline-block;
			vertical-align: middle;
		}

		.content-commodity-right-buy > div:first-child{
			border: 1px solid #F99652;
			background: #FDEAD1;
			color: #E58948;
		}

		.content-commodity-right-buy > div:last-child{
			background: #F27300;
			color: white;
		}

		.content-commodity-right-ask{
			display: flex;
			align-items: center;
		}

	</style>
</head>
<body>
<div id="app">
	<header-full :bordered="true"></header-full>
	<min-width-container>
		<div class="content">
			<div class="m-t-12 m-b-12">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>某个类型</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div class="content-commodity m-b-20">
				<div class="content-commodity-wapper">
					<div class="content-commodity-wapper-flex  m-b-20">
						<div class="content-commodity-left">
							<div class="content-commodity-left-image" :style="{backgroundImage: 'url(' + commodity.iconUrl + ')'}"></div>
							<div class="content-commodity-left-subimages m-t-8">
								<div class="content-commodity-left-subimages-last text-weak-4 pointer"><span class="el-icon-arrow-left"></span></div>
								<div class="content-commodity-left-subimages-images">
									<div class="content-commodity-left-subimages-images-container">
										<div v-for="item in subImageUrls" class="pointer" >
											<el-image
													style="width: 100%; height: 100%"
													:src="item"
													:preview-src-list="subImageUrls">
											</el-image>
										</div>
									</div>
								</div>
								<div class="content-commodity-left-subimages-next text-weak-4 pointer"><span class="el-icon-arrow-right"></span></div>
							</div>
						</div>
						<div class="content-commodity-right text-4 text-general-1">
							<div class="content-commodity-right-title text-2 text-important" style="font-weight: 900;">{{commodity.name}}</div>
							<div class="content-commodity-right-price m-t-16">
								现价: <span class="text-3" style="color: #F76016; font-weight: 900;">{{commodity.price.toFixed(2)}}</span>
								<div style="height:10px;weight:100% "></div>
								库存: <span class="text-3" style="font-weight: 900;">{{commodity.stock}}</span>
							</div>
							<div class="content-commodity-right-addr m-t-12 m-b-12">发货地: 北京市 <span class="m-l-8 m-r-4">配送方式:</span> <el-radio v-model="radio" label="1" disabled>到付</el-radio><el-radio v-model="radio" label="2">在线支付</el-radio></div>
							<el-divider></el-divider>
							<div class="content-commodity-right-num">数量: <el-input-number v-model="num" size="mini" :min="1" :max="10" label="选择一个数量"></el-input-number></div>
							<div class="content-commodity-right-method m-t-16">购买方式：<div class="content-commodity-right-selected text-general-1 text-4 center">余额支付</div></div>
							<el-divider></el-divider>
							<div class="content-commodity-right-buy">
								<div class="center text-3 pointer m-l-12" @click="go_buy">立即购买</div>
								<div class="center text-3 pointer m-l-8" @click="add_to_cart">加入购物车</div>
							</div>
							<div class="content-commodity-right-ask m-t-12 m-b-12">
								<div class="m-r-16">服务承诺:</div>
								<div><img src="images/pledges_01.jpg"/></div>
								<div><img src="images/pledges_02.jpg"/></div>
								<div><img src="images/pledges_03.jpg"/></div>
							</div>
						</div>
					</div>
					<div style="margin-top: 25px;">
						<el-tabs v-model="activeName" type="border-card" >
							<el-tab-pane label="商品详情" name="first" v-html="commodity.detail"></el-tab-pane>
							<el-tab-pane label="规格参数" name="second" v-html="commodity.specParam"></el-tab-pane>
							<el-tab-pane name="third">

								<div slot="label" style="padding-top: 10px">
									<el-badge :value="comments.length" :max="99" >
										<el-button size="medium" type="text">商品评价</el-button>
									</el-badge>
								</div>

								<!--										添加订单内容-->
								<!--										显示订单平均水平：-->

								<div style="padding-top: 20px; padding-bottom: 20px">
									商品平均得分：
									<el-rate
											v-model="ave"
											:colors="pagnition.colors"
											show-score
											disabled
											style="display: inline">
										<!--            show-score: 显示目前分数-->
										<!--            使用diabled变为只读-->
									</el-rate>
								</div>
								<div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
									<div v-for="comment in comments.slice((pagnition.currentPage-1)*pagnition.pagesize,pagnition.currentPage*pagnition.pagesize)" style="margin-bottom:10px ;border:1px solid ; border-color:#D3D3D3;border-radius: 4px" >
										评论等级：
										<el-rate
												v-model="comment.level"
												:colors="pagnition.colors"
												show-score
												disabled
												style="display: inline">
											<!--            show-score: 显示目前分数-->
											<!--            使用diabled变为只读-->
										</el-rate>
										<div style="float:right;weight:40%;">
											发表时间：
											<span class="text-3" style="font-weight: 700;">{{comment.createTime}}</span>

										</div>

										<el-input
												type="textarea"
												:rows="2"
												:disabled="true"
												placeholder="请输入评论内容"
												v-model="comment.content"></el-input>
									</div>
								</div>

								<!--									分页工具-->
								<el-pagination
										:page-sizes="[5, 10, 20, 30]"
										:page-size="pagnition.pagesize"
										layout="total, sizes, prev, pager, next, jumper"
										@current-change="current_change"
										@size-change="size_change"
										@prev-click="pre_click"
										@next-click="next_click"
										:total="comments.length"
										background>
								</el-pagination>
							</el-tab-pane>

						</el-tabs>
					</div>
				</div>
				<div class="content-commodity-recommend">
					<div class="center text-3 text-general-1" style="font-weight: 900;">相关配件</div>
					<div>
						<ul>
							<li v-for="item in 4" class="content-commodity-recommend-item m-t-20">
								<div class="center"><el-image src="/images/product4.png"></el-image></div>
								<div class="center text-general-1 text-4">中联重科液压油18</div>
								<div class="center text-4" style="font-weight: 900;color: #F27300;">¥279.00</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</min-width-container>
	<footer-image></footer-image>
	<footer-link></footer-link>
	<footer-bottom></footer-bottom>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./element-ui/index.js"></script>
<script src="./components/min-width-container.js"></script>
<script src="./components/footer-image.js"></script>
<script src="./components/footer-bottom.js"></script>
<script src="./components/footer-link.js"></script>
<script src="./components/header-full.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data(){
			return {
				id: '',
				activeName: 'first',
				radio: '2',
				num: 1,
				commodity: {},
				subImageUrls: [],

				comments:[],
				ave:0,
				pagnition:{
					currentPage: 1,
					pagesize: 5,
					colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
				},
			};
		},
		methods: {
			go_buy(){
				if(this.id){
					//保存商品信息到sessionStorage
					const simulated_cart = {
						lists: [{
							productId: this.commodity.id,
							name: this.commodity.name,
							price: this.commodity.price,
							quantity: this.num,
							totalPrice: this.num * this.commodity.price,
						}],
						totalPrice: this.commodity.price * this.num,
						is_simulated_cart: true
					}
					const params = new URLSearchParams();
					params.append("productId", this.id);
					axios.post("/cart/buy.do", params).then(response=>{

						if(response.data.status === 0){
							const isstatus = response.data.data;
							if(isstatus===0) {
								this.$message.error("产品已下架");
							}
							else{
								sessionStorage.setItem("cart", JSON.stringify(simulated_cart));
								//跳转到提交订单页面
								window.location.href = "/submit-order.html";
							}
						}else{
							this.$message.error(response.data.msg);
						}
					}).catch(err=>{
						this.$message.error("连接服务器异常");
					});

				}


			},
			add_to_cart(){
				if(this.id){
					const params1 = new URLSearchParams();
					params1.append("productId", this.id);

					const params2 = new URLSearchParams();
					params2.append("productId", this.id);
					params2.append("count", this.num);

					axios.post("/cart/buy.do", params1).then(response=>{
						if(response.data.status === 0){
							const isstatus = response.data.data;
							if(isstatus===0) {
								this.$message.error("产品已下架");
							}
							else{
								axios.post("/cart/savecart.do", params2).then(response=>{
									if(response.data.status === 0){
										this.$message({
											message: "添加到购物车成功",
											type: "success"
										});
									}else{
										this.$message.error(response.data.msg);
									}
								}).catch(err=>{
									this.$message.error("连接服务器异常");
								});
							}
						}else{
							this.$message.error(response.data.msg);
						}
					}).catch(err=>{
						this.$message.error("连接服务器异常");
					});

				}
			},
			//分页功能：
			current_change: function (currentPage) {
				this.pagnition.currentPage = currentPage;
			},
			pre_click: function () {
				this.pagnition.currentPage -= 1;
			},
			next_click: function () {
				this.pagnition.currentPage += 1;
			},
			size_change: function (cur_pageSize) {
				this.pagnition.currentPage = 1
				this.pagnition.pagesize = cur_pageSize
			}
		},
		created(){
			const query = window.location.search;
			const id = query.substring(1, query.length);
			if(/^\d+$/.test(id)){
				this.id = id;
				const params = new URLSearchParams();
				params.append('productId', id);
				axios.post("/product/getdetail.do", params).then(response=>{
					if(response.data.status === 0){
						this.commodity = response.data.data;
						this.subImageUrls = this.commodity.subImages.split(";");
						//load commodity comments:
						param2 = new URLSearchParams();
						param2.append('commodityNo', id)
						axios.post("/comment/get_commodity_comment.do", param2).then(response=>{
							this.comments = this.comments.concat(response.data.data)
							this.ave = parseFloat(0);
							for(var i=0; i<this.comments.length; i++){
								console.log(this.comments[i].level)
								this.ave += parseFloat(this.comments[i].level)
							}
							this.ave /= this.comments.length
							// console.log(this.comments)
						}).catch(err=>{
							//console.log("加载订单评论失败")
						})
					}else{
						this.$message.error(response.data.msg);
					}
				}).catch(err=>{
					this.$message.error("连接服务器异常");
				});
			}else{
				this.$message.error("参数错误");
			}

		},


	});

</script>
</body>
</html>
